<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>首页</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <!-- Main Navigation -->
  <!-- //登录界面 -->
  <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
      <!--Content-->
      <div class="modal-content">

        <!--Modal cascading tabs-->
        <div class="modal-c-tabs">

          <!-- Nav tabs -->
          <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
                登录</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
                注册</a>
            </li>
          </ul>

          <!-- Tab panels -->
          <div class="tab-content">
            <!--Panel 7-->
            <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

              <!--Body-->
              <div class="modal-body mb-1">
                <div class="md-form form-sm mb-5">
                  <i class="fas fa-envelope prefix"></i>
                  <input type="text" id="modalLRInput10" maxlength="11" class="form-control form-control-sm validate">
                  <label data-error="wrong" data-success="right" for="modalLRInput10">学号/手机号</label>
                </div>

                <div class="md-form form-sm mb-4">
                  <i class="fas fa-lock prefix"></i>
                  <input type="password" id="modalLRInput11" class="form-control form-control-sm validate">
                  <label data-error="wrong" data-success="right" for="modalLRInput11">密码</label>
                </div>
                <div class="text-center mt-2" id="parentLogin">
                  <button class="btn btn-info">登录<i class="fas fa-sign-in ml-1"></i></button>
                </div>
              </div>
              <!--Footer-->
              <div class="modal-footer">
                <div class="options text-center text-md-right mt-1">
                  <p>没有账号? <a href="#" class="blue-text">去注册</a></p>
                  <p>忘记 <a href="#" class="blue-text">密码?</a></p>
                </div>
                <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">关闭</button>
              </div>

            </div>
            <!--/.Panel 7-->

            <!--Panel 8-->
            <div class="tab-pane fade" id="panel8" role="tabpanel">

              <!--Body-->
              <div class="modal-body">
                <div class="md-form form-sm mb-5">
                  <i class="fas fa-envelope prefix"></i>
                  <input type="text" id="modalLRInput12" maxlength="11" class="form-control form-control-sm validate">
                  <label data-error="wrong" data-success="right" for="modalLRInput12">手机号/学号</label>
                </div>

                <div class="md-form form-sm mb-5">
                  <i class="fas fa-lock prefix"></i>
                  <input type="password" id="modalLRInput13" class="form-control form-control-sm validate">
                  <label data-error="wrong" data-success="right" for="modalLRInput13">你的密码</label>
                </div>

                <div class="md-form form-sm mb-4">
                  <i class="fas fa-lock prefix"></i>
                  <input type="password" id="modalLRInput14" class="form-control form-control-sm validate">
                  <label data-error="wrong" data-success="right" for="modalLRInput14">请确认你的密码</label>
                </div>

                <div class="text-center form-sm mt-2" id="parentZhuce">
                  <button class="btn btn-info">注册<i class="fas fa-sign-in ml-1"></i></button>
                </div>

              </div>
              <!--Footer-->
              <div class="modal-footer">
                <div class="options text-right">
                  <p class="pt-1">已经有了账号? <a href="#" class="blue-text">去登录</a></p>
                </div>
                <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">关闭</button>
              </div>
            </div>
            <!--/.Panel 8-->
          </div>

        </div>
      </div>
      <!--/.Content-->
    </div>
  </div>
  <header>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg  scrolling-navbar">
      <div class="container smooth-scroll">
        <img src="images/logo.png">
        <!--      <a class="navbar-brand" href="#"><strong>LGO</strong></a>-->

        <div class="collapse navbar-collapse " id="navbarSupportedContent-7">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item mx-3  ">
              <a class="nav-link" href="index.html" data-offset="60">首页</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="about.html" data-offset="60">关于</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="news.html" data-offset="60">华软消息</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="man.html" data-offset="60">华软人员</a>
            </li>
            <li class="nav-item">
              <a href="" data-toggle="modal" data-target="#modalLRForm" data-offset="60" class="nav-link">注册/登录</a>
            </li>
          </ul>

        </div>
      </div>
    </nav>
  </header>
  <!-- Main Navigation -->
  <div class="header">
    <div class="view">
      <img class="d-block w-100" src="./images/pc-首页_04.gif" alt="First slide">
      <div class="mask rgba-black-slight flex-center">
        <div class="container white-text">
          <div class="row justify-content-between">
            <div class="col-7">
              <div style="display:flex;flex-direction: column;" class="flex-center">
                <p class="w-100" style="font-size:26px">在华软</p>
                <p class="w-100" style="font-size:26px">只需要一个APP</p>
                <p class="w-100" style="font-size:18px;margin:20px 0 10px 0">
                  微华软是广州大学华软软件学院校园服务平台，该平台为学习学子推送了丰富的校园资讯、提供后勤维修、物资申请等功能，是学子们必备的校园神器</p>
                <div class="w-100">
                  <button type="button" class="btn text-capitalize white black-text wow rotateInDownLeft"><i
                      class="fab fa-apple" style="font-size:22px;margin-right:5px"></i>iPhone下载</button>
                  <button type="button" class="btn text-capitalize white black-text wow rotateInDownRight"><i
                      class="fab fa-android" style="font-size:22px;margin-right:5px"></i>Andrid下载</button>
                </div>
              </div>
            </div>
            <div class="col-4">
              <img class="d-block w-100 wow zoomInDown" src="./images/pc-首页_06.png" alt="First slide">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="container">
    <section class="text-center my-5">
      <!-- Grid row -->
      <h2 class="h1-responsive font-weight-bold my-5 text-center">我们能做什么</h2>
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-3">

          <img class="d-block w-100" src="./images/pc-首页_07.gif" alt="First slide">
          <h5 class="font-weight-bold my-3 wow fadeInUp">信息查询</h5>
          <p class="text-muted mb-md-0 mb-5 text-left wow fadeInUp">学生信息查询、课表查询等各项信息查询，有个手机就够了
          </p>

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3">

          <img class="d-block w-100" src="./images/pc-首页_09.gif" alt="First slide">
          <h5 class="font-weight-bold my-3 wow fadeInDown">收取快件</h5>
          <p class="text-muted mb-md-0 mb-5 text-left wow fadeInDown">扫码收取快递件，线上预约寄件，无需排队队等候
          </p>

        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-3">

          <img class="d-block w-100" src="./images/pc-首页_11.gif" alt="First slide">
          <h5 class="font-weight-bold my-3 wow fadeInLeft">活动参与</h5>
          <p class="text-muted mb-md-0 mb-5 text-left wow fadeInLeft">全面掌握校内各种社团活动比赛，线上可以一键报名，方便快捷
          </p>

        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-3">

          <img class="d-block w-100" src="./images/pc-首页_13.gif" alt="First slide">
          <h5 class="font-weight-bold my-3 wow fadeInRight">校内资讯</h5>
          <p class="text-muted mb-md-0 mb-5 text-left wow fadeInRight">全面掌握校内资讯，让你时时刻刻都知道学校新鲜事
          </p>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->
    </section>

  </div>

  <div class="twobg">
    <div class="view">
      <img class="d-block w-100" src="./images/pc-首页_19.gif" alt="First slide">
      <div class="mask rgba-black-slight flex-center">
        <div class="container white-text">
          <p class="text-center my-5" style="font-size:26px;">我们的统计</p>
          <div class="row justify-content-around">
            <div class="col-2 text-center" style="border:white 1px solid;padding:40px 0;">
              <img class="d-block w-50 animated bounce infinite" style="margin:0 auto" src="./images/like.png">
              <p style="margin:10px 0">喜欢</p>
              <p style="font-size:30px">10K+</p>
            </div>
            <div class="col-2 text-center" style="border:white 1px solid;padding:40px 0;">
              <img class="d-block w-50 animated bounce infinite" style="margin:0 auto" src="./images/down.png">
              <p style="margin:10px 0">下载量</p>
              <p style="font-size:30px">100K+</p>
            </div>
            <div class="col-2 text-center" style="border:white 1px solid;padding:40px 0;">
              <img class="d-block w-50 animated bounce infinite" style="margin:0 auto" src="./images/user.png">
              <p style="margin:10px 0">用户数</p>
              <p style="font-size:30px">15K+</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container lastctn my-5">
    <div class="row justify-content-between">
      <div class="col-5">
        <img class="d-block w-100 wow rotateIn" src="./images/pc-首页_22.png" alt="First slide">
      </div>
      <div class="col-6" style="padding:20px 0;font-size:18px">
        <p style="font-size:28px">联系我们</p>
        <p>地址：广东省广州市从化区经济开发区高技术产业园广从南路548号</p>
        <p>电话：020-87818918</p>
        <p>传真：87818020</p>
        <p>邮编：510990</p>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <footer class="page-footer font-small elegant-color  pt-2">

    <div class="container">

      <!-- Grid row-->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-12">
          <div class="mb-5 flex-center">

            <a class=" mr-md-5 mr-3 ">
              关于我们
            </a>
            <a class=" mr-md-5 mr-3 ">
              产品展示
            </a>
            <a class=" mr-md-5 mr-3 ">
              友情链接
            </a>
          </div>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row-->

    </div>
    <!-- Footer Elements -->
    <!-- Copyright -->
    <div class=" text-center py-4">网站公安备案编号：4001840100050
      粤ICP号：05085382号
    </div>


  </footer>
  <!-- Footer -->
  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <script>
    $(function () {
      new WOW().init();
      $("#parentLogin").click(function () {
      var LoginZhanghao = $("#modalLRInput10").val();
      var LoginMima = $("#modalLRInput11").val();
      var regstr = /^\d{10}|\d{11}$/;
      var regstr2 = /^[0-9a-zA-Z]+$/;
      if(!regstr.test(LoginZhanghao)){
        alert("学号/手机号必须为10-11为数字")
      }else if(!regstr2.test(LoginMima)){
        alert("密码必须数字或者字母")
      }else{
      alert("登录成功")
      window.location.href="index.html";
      }
      })
      $("#parentZhuce").click(function () {
      var LoginZhanghao = $("#modalLRInput12").val();
      var LoginMima1 = $("#modalLRInput13").val();
      var LoginMima2 = $("#modalLRInput14").val();
      var regstr = /^\d{10}|\d{11}$/;
      var regstr2 = /^[0-9a-zA-Z]+$/;
      if(!regstr.test(LoginZhanghao)){
        alert("学号/手机号必须为10-11为数字")
      }else if(!regstr2.test(LoginMima1)){
        alert("密码必须数字或者字母")
      }else if(!regstr2.test(LoginMima2)){
        alert("密码必须数字或者字母")
      }else{
      alert("注册成功")
      window.location.href="index.html";
      }
      })
    })

  </script>
</body>

</html>